<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col v-bind="grid">
                   <DatePicker type="daterange" placeholder="请输入治疗日期"></DatePicker>
            </Col>
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/诊疗号" element-id="name" />
            </Col>
            <Col v-bind="grid">
                <FormItem label="诊室" prop="personnel" label-for="personnel">
                    <Select v-model="data.room" placeholder="诊室" element-id="personnel" clearable>
                        <Option :value="0">一诊</Option>
                        <Option :value="1">二诊</Option>
                        <Option :value="2">三诊</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="治疗项目" prop="disease" label-for="disease">
                    <Select v-model="data.project" placeholder="治疗项目" filterable element-id="diagnosis" clearable>
                        <Option :value="0">308</Option>
                        <Option :value="1">311</Option>
                        <Option :value="2">药浴</Option>
                        <Option :value="3">熏蒸</Option>
                        <Option :value="4">注射输液</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data () {
            return {
                model12: [],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    room: '',
                    project: '',
                    label: '',
                    overdue: ''
                },
                rules: {

                }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        }
    }
</script>
